// ==UserScript==
// @name         ERP-Trac系统现代化界面优化
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  使用Tailwind CSS和Font Awesome优化ERP系统界面
// @author       randlly
// @match        http://dev.bokesoft.com:8000/trac/eri-erp/**
// @grant        GM_addStyle
// @grant        GM_xmlhttpRequest
// @connect      cdn.jsdelivr.net
// ==/UserScript==

(function() {
    'use strict';

    // 加载外部资源
    function loadExternalResources() {
        // 加载Tailwind CSS
        const tailwindCSS = document.createElement('link');
        tailwindCSS.rel = 'stylesheet';
        tailwindCSS.href = 'https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css';
        document.head.appendChild(tailwindCSS);

        // 加载Font Awesome
        const fontAwesome = document.createElement('link');
        fontAwesome.rel = 'stylesheet';
        fontAwesome.href = 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';
        document.head.appendChild(fontAwesome);
    }

    // 自定义样式
    const customStyles = `
        /* 全局样式优化 */
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }

        /* 英雄区域 */
        .hero-section {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            color: white;
            padding: 4rem 2rem;
            text-align: center;
            margin-bottom: 2rem;
        }

        /* 卡片容器样式 */
        .card-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 1.5rem;
            padding: 1.5rem;
        }

        /* 卡片基础样式 */
        .card {
            background: white;
            border-radius: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            overflow: hidden;
            position: relative;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }

        /* 卡片头部样式 */
        .card-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e5e7eb;
            background: linear-gradient(to right, #f8fafc, #f1f5f9);
        }

        .card-header h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1e40af;
            display: flex;
            align-items: center;
        }

        .card-header h3 i {
            margin-right: 0.75rem;
            color: #3b82f6;
        }

        /* 卡片内容样式 */
        .card-content {
            padding: 1.5rem;
        }

        /* 链接卡片样式 */
        .link-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .link-card .link-list {
            flex: 1;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

        .link-card a {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            border-radius: 0.5rem;
            color: #4b5563;
            transition: all 0.2s ease;
            text-decoration: none;
        }

        .link-card a:hover {
            background: #f1f5f9;
            color: #1e40af;
            transform: translateX(4px);
        }

        .link-card a i {
            margin-right: 0.75rem;
            color: #3b82f6;
            font-size: 1.25rem;
        }

        /* 内容卡片样式 */
        .content-card {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .content-card .content-body {
            flex: 1;
            padding: 1.5rem;
            color: #4b5563;
            line-height: 1.6;
        }

        /* 表格卡片样式 */
        .table-card {
            grid-column: 1 / -1;
            margin-top: 1rem;
        }

        .table-card .table-container {
            padding: 1.5rem;
            overflow-x: auto;
        }

        .table-card table {
            width: 100%;
            border-collapse: separate;
            border-spacing: 0;
        }

        .table-card th {
            background: #f8fafc;
            padding: 1rem;
            font-weight: 600;
            color: #1e40af;
            text-align: left;
            border-bottom: 2px solid #e5e7eb;
        }

        .table-card td {
            padding: 1rem;
            border-bottom: 1px solid #e5e7eb;
            color: #4b5563;
        }

        .table-card tr:hover {
            background: #f8fafc;
        }

        /* 状态标签样式 */
        .status-badge {
            display: inline-flex;
            align-items: center;
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
        }

        .status-badge.new {
            background: #dcfce7;
            color: #166534;
        }

        .status-badge.assigned {
            background: #e0f2fe;
            color: #0369a1;
        }

        .status-badge.closed {
            background: #f3f4f6;
            color: #4b5563;
        }

        /* 整合后的导航栏样式 */
        .modern-nav {
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
            padding: 0.5rem 2rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 2rem;
        }

        .nav-logo {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .nav-logo img {
            height: 40px;
            width: auto;
        }

        .nav-logo-text {
            color: white;
            font-size: 1.25rem;
            font-weight: 600;
        }

        .nav-menu {
            display: flex;
            gap: 1rem;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .nav-menu li {
            position: relative;
        }

        .nav-menu a {
            color: rgba(255, 255, 255, 0.9);
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-menu a:hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
        }

        .nav-menu a.active {
            color: white;
            background: rgba(255, 255, 255, 0.2);
        }

        .nav-menu a i {
            font-size: 1rem;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 1.5rem;
        }

        .nav-search {
            position: relative;
        }

        .nav-search input {
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            padding: 0.5rem 1rem;
            padding-left: 2.5rem;
            border-radius: 0.375rem;
            width: 200px;
            transition: all 0.3s ease;
        }

        .nav-search input:focus {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.3);
            outline: none;
            width: 250px;
        }

        .nav-search i {
            position: absolute;
            left: 0.75rem;
            top: 50%;
            transform: translateY(-50%);
            color: rgba(255, 255, 255, 0.7);
        }

        .nav-user {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: white;
        }

        .nav-user-info {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .nav-user-info:hover {
            background: rgba(255, 255, 255, 0.1);
        }

        .nav-user-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        .nav-user-dropdown {
            position: absolute;
            top: 100%;
            right: 0;
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            min-width: 200px;
            display: none;
        }

        .nav-user-dropdown.active {
            display: block;
        }

        .nav-user-dropdown a {
            color: #4b5563;
            padding: 0.75rem 1rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            transition: all 0.2s ease;
        }

        .nav-user-dropdown a:hover {
            background: #f3f4f6;
            color: #1e40af;
        }

        @media (max-width: 768px) {
            .modern-nav {
                padding: 0.5rem 1rem;
            }

            .nav-menu {
                display: none;
            }

            .nav-search input {
                width: 150px;
            }

            .nav-search input:focus {
                width: 200px;
            }
        }

        /* 主内容区域样式 */
        #main {
            background: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            margin: 2rem auto;
            padding: 2rem;
            max-width: 1200px;
        }

        /* 页脚样式 */
        .modern-footer {
            background: #1e293b;
            color: white;
            padding: 3rem 0;
            margin-top: 3rem;
        }

        .modern-footer a {
            color: #94a3b8;
            transition: all 0.3s ease;
        }

        .modern-footer a:hover {
            color: white;
        }

        /* 加载动画 */
        .loading-spinner {
            width: 40px;
            height: 40px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3b82f6;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1000;
        }

        @keyframes spin {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            100% { transform: translate(-50%, -50%) rotate(360deg); }
        }
    `;

    // 创建英雄区域
    function createHeroSection() {
        const hero = document.createElement('div');
        hero.className = 'hero-section';
        hero.innerHTML = `
            <h1 class="text-4xl font-bold mb-4">博科ERP产品部</h1>
            <p class="text-xl mb-8">高效、智能的企业资源管理解决方案</p>
            <div class="flex justify-center space-x-4">
                <button class="bg-white text-blue-600 px-6 py-2 rounded-lg hover:bg-blue-50 transition-colors">
                    <i class="fas fa-rocket mr-2"></i>快速开始
                </button>
                <button class="border border-white text-white px-6 py-2 rounded-lg hover:bg-white hover:text-blue-600 transition-colors">
                    <i class="fas fa-book mr-2"></i>查看文档
                </button>
            </div>
        `;
        return hero;
    }

    // 创建资源卡片
    function createResourceCard(title, icon, content, link) {
        const card = document.createElement('div');
        card.className = 'card';
        card.innerHTML = `
            <div class="flex items-center mb-4">
                <i class="${icon} text-2xl text-blue-600 mr-3"></i>
                <h3 class="text-xl font-semibold">${title}</h3>
            </div>
            <p class="text-gray-600 mb-4">${content}</p>
            <a href="${link}" class="text-blue-600 hover:text-blue-800">
                了解更多 <i class="fas fa-arrow-right ml-1"></i>
            </a>
        `;
        return card;
    }


    // 创建现代化页脚
    function createModernFooter() {
        const footer = document.createElement('footer');
        footer.className = 'modern-footer';
        footer.innerHTML = `
            <div class="container mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                    <div>
                        <h4 class="text-lg font-semibold mb-4">关于我们</h4>
                        <p class="text-gray-400">博科ERP致力于为企业提供最优质的管理解决方案</p>
                    </div>
                    <div>
                        <h4 class="text-lg font-semibold mb-4">快速链接</h4>
                        <ul class="space-y-2">
                            <li><a href="#"><i class="fas fa-file-alt mr-2"></i>文档中心</a></li>
                            <li><a href="#"><i class="fas fa-headset mr-2"></i>技术支持</a></li>
                            <li><a href="#"><i class="fas fa-envelope mr-2"></i>联系我们</a></li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-semibold mb-4">联系方式</h4>
                        <ul class="space-y-2 text-gray-400">
                            <li><i class="fas fa-phone mr-2"></i>400-123-4567</li>
                            <li><i class="fas fa-envelope mr-2"></i>support@bokesoft.com</li>
                        </ul>
                    </div>
                    <div>
                        <h4 class="text-lg font-semibold mb-4">关注我们</h4>
                        <div class="flex space-x-4">
                            <a href="#"><i class="fab fa-weixin text-2xl"></i></a>
                            <a href="#"><i class="fab fa-weibo text-2xl"></i></a>
                        </div>
                    </div>
                </div>
                <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
                    <p>&copy; 2025 博科软件. All rights reserved.</p>
                </div>
            </div>
        `;
        return footer;
    }

    // 创建内容卡片
    function createContentCard(title, content, icon = 'fas fa-file-alt') {
        const card = document.createElement('div');
        card.className = 'card content-card';
        card.innerHTML = `
            <div class="card-header">
                <h3><i class="${icon}"></i>${title}</h3>
            </div>
            <div class="content-body">
                ${content}
            </div>
        `;
        return card;
    }

    // 创建链接卡片
    function createLinkCard(title, links, icon = 'fas fa-link') {
        const card = document.createElement('div');
        card.className = 'card link-card';

        let linksHtml = '';
        links.forEach(link => {
            linksHtml += `
                <a href="${link.url}">
                    <i class="${link.icon || 'fas fa-external-link-alt'}"></i>
                    ${link.text}
                </a>
            `;
        });

        card.innerHTML = `
            <div class="card-header">
                <h3><i class="${icon}"></i>${title}</h3>
            </div>
            <div class="link-list">
                ${linksHtml}
            </div>
        `;
        return card;
    }

    // 重新组织main区域内容
    function reorganizeMainContent() {
        const mainContent = document.querySelector('#main');
        if (!mainContent) return;

        // 检查是否是新建任务单页面
        if (mainContent.classList.contains('trac-nodatetimehint')) {
            // 优化新建任务单页面
            const content = mainContent.querySelector('#content');
            if (content) {
                // 添加新的样式
                const style = document.createElement('style');
                style.textContent = `
                    .ticket-form {
                        width: 100% !important;
                        background: white;
                        border-radius: 1rem;
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                        padding: 2rem;
                    }

                    .ticket-form h1 {
                        color: #1e40af;
                        font-size: 1.875rem;
                        font-weight: 600;
                        margin-bottom: 2rem;
                        padding-bottom: 1rem;
                        border-bottom: 2px solid #e5e7eb;
                    }

                    .ticket-form fieldset {
                        border: 1px solid #e5e7eb;
                        border-radius: 0.5rem;
                        padding: 1.5rem;
                        margin-bottom: 1.5rem;
                    }

                    .ticket-form legend {
                        color: #1e40af;
                        font-weight: 600;
                        padding: 0 1rem;
                    }

                    .ticket-form .trac-properties {
                        width: 100%;
                        border-collapse: separate;
                        border-spacing: 0;
                    }

                    .ticket-form .trac-properties th {
                        background: #f8fafc;
                        padding: 0.75rem 1rem;
                        text-align: left;
                        font-weight: 600;
                        color: #4b5563;
                        border-bottom: 1px solid #e5e7eb;
                    }

                    .ticket-form .trac-properties td {
                        padding: 0.75rem 1rem;
                        border-bottom: 1px solid #e5e7eb;
                    }

                    .ticket-form input[type="text"],
                    .ticket-form select,
                    .ticket-form textarea {
                        width: 100%;
                        padding: 0.5rem;
                        border: 1px solid #e5e7eb;
                        border-radius: 0.375rem;
                        transition: all 0.2s;
                    }

                    .ticket-form input[type="text"]:focus,
                    .ticket-form select:focus,
                    .ticket-form textarea:focus {
                        border-color: #3b82f6;
                        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
                        outline: none;
                    }

                    .ticket-form .buttons {
                        margin-top: 2rem;
                        display: flex;
                        gap: 1rem;
                    }

                    .ticket-form .buttons input[type="submit"] {
                        padding: 0.75rem 1.5rem;
                        border-radius: 0.375rem;
                        font-weight: 500;
                        transition: all 0.2s;
                    }

                    .ticket-form .buttons input[type="submit"][name="preview"] {
                        background: #f3f4f6;
                        color: #4b5563;
                        border: 1px solid #e5e7eb;
                    }

                    .ticket-form .buttons input[type="submit"][name="submit"] {
                        background: #3b82f6;
                        color: white;
                        border: none;
                    }

                    .ticket-form .buttons input[type="submit"]:hover {
                        transform: translateY(-1px);
                        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                    }

                    .ticket-form .wikitoolbar {
                        background: #f8fafc;
                        border: 1px solid #e5e7eb;
                        border-radius: 0.375rem;
                        padding: 0.5rem;
                        margin-bottom: 0.5rem;
                    }

                    .ticket-form .wikitoolbar a {
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        width: 2rem;
                        height: 2rem;
                        border-radius: 0.25rem;
                        color: #4b5563;
                        transition: all 0.2s;
                    }

                    .ticket-form .wikitoolbar a:hover {
                        background: #e5e7eb;
                        color: #1e40af;
                    }

                    .ticket-form .trac-resizable {
                        border: 1px solid #e5e7eb;
                        border-radius: 0.375rem;
                        overflow: hidden;
                    }

                    .ticket-form .trac-resizable textarea {
                        border: none;
                        resize: none;
                    }

                    .ticket-form .trac-resizable .trac-grip {
                        height: 0.5rem;
                        background: #f3f4f6;
                        cursor: ns-resize;
                    }
                `;
                document.head.appendChild(style);

                // 添加新的类名
                content.classList.add('ticket-form');

                // 优化表单布局
                const form = content.querySelector('#propertyform');
                if (form) {
                    // form.style.maxWidth = '1200px';
                    form.style.margin = '0 auto';
                }

                // 优化按钮样式
                const buttons = content.querySelector('.buttons');
                if (buttons) {
                    buttons.style.justifyContent = 'flex-end';
                }

                return;
            }
        }



        // 移除 footer 元素
        const footer = document.querySelector('#footer');
        if (footer) {
            footer.remove();
        }

        // 创建新的内容容器
        const newContainer = document.createElement('div');
        newContainer.className = 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6';

        const devSection = mainContent.querySelector('#开发');
        if (devSection) {
            const wikipage = document.querySelector('#wikipage');
            if (!wikipage) return;

            // 获取所有 h2 标签
            const sections = wikipage.querySelectorAll('h2');

            sections.forEach(section => {
                const sectionTitle = section.textContent.trim();
                let sectionContent = '';
                let nextElement = section.nextElementSibling;

                // 收集 h2 后面的内容，直到遇到下一个 h2
                while (nextElement && nextElement.tagName !== 'H2' && nextElement.tagName !== 'H3' ) {
                    if (nextElement.tagName === 'P') {
                        // 处理段落，添加渐变背景和图标
                        sectionContent += `
                            <div class="bg-gradient-to-r from-blue-50 to-white p-4 rounded-lg mb-4 flex items-start">
                                <i class="fas fa-info-circle text-blue-500 mt-1 mr-3"></i>
                                <div class="flex-1">${nextElement.innerHTML}</div>
                            </div>`;
                    } else if (nextElement.tagName === 'UL') {
                        // 处理列表，添加动画效果和图标
                        const listItems = Array.from(nextElement.querySelectorAll('li')).map(li => {
                            const links = li.querySelectorAll('a');
                            if (links.length > 0) {
                                return `
                                    <div class="group flex items-center mb-3 p-2 rounded-lg hover:bg-blue-50 transition-all duration-300">
                                        <i class="fas fa-link text-blue-500 mr-3 group-hover:text-blue-600"></i>
                                        <div class="flex-1">${li.innerHTML}</div>
                                        <i class="fas fa-chevron-right text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></i>
                                    </div>`;
                            }
                            return `
                                <div class="group flex items-center mb-3 p-2 rounded-lg hover:bg-gray-50 transition-all duration-300">
                                    <i class="fas fa-circle text-gray-400 text-xs mr-3"></i>
                                    <div>${li.innerHTML}</div>
                                </div>`;
                        }).join('');
                        sectionContent += `<div class="space-y-2">${listItems}</div>`;
                    } else if (nextElement.tagName === 'BLOCKQUOTE') {
                        // 处理引用块，添加特殊样式
                        sectionContent += `
                            <div class="border-l-4 border-blue-500 bg-blue-50 p-4 rounded-r-lg mb-4">
                                <i class="fas fa-quote-left text-blue-500 mr-2"></i>
                                ${nextElement.innerHTML}
                            </div>`;
                    }
                    nextElement = nextElement.nextElementSibling;
                }

                // 创建卡片
                const card = document.createElement('div');
                card.className = 'bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1';

                // 根据标题选择图标和颜色
                const iconConfig = {
                    '开发': { icon: 'fas fa-code', color: 'blue' },
                    '项目支持': { icon: 'fas fa-project-diagram', color: 'purple' },
                    '质量管理': { icon: 'fas fa-chart-line', color: 'green' },
                    '主线压测报告': { icon: 'fas fa-chart-bar', color: 'orange' },
                    '主线代码覆盖率报表': { icon: 'fas fa-percentage', color: 'red' }
                };

                const config = iconConfig[sectionTitle] || { icon: 'fas fa-file-alt', color: 'gray' };

                card.innerHTML = `
                    <div class="p-6">
                        <div class="flex items-center mb-6">
                            <div class="w-12 h-12 rounded-lg bg-${config.color}-100 flex items-center justify-center mr-4">
                                <i class="${config.icon} text-${config.color}-600 text-xl"></i>
                            </div>
                            <h3 class="text-xl font-bold text-gray-800">${sectionTitle}</h3>
                        </div>
                        <div class="text-gray-600 space-y-4">
                            ${sectionContent}
                        </div>
                    </div>
                `;

                // 添加卡片悬停效果
                card.addEventListener('mouseenter', () => {
                    card.style.transform = 'translateY(-4px)';
                });

                card.addEventListener('mouseleave', () => {
                    card.style.transform = 'translateY(0)';
                });

                newContainer.appendChild(card);
            });
        }

        // 处理原有的表格内容
        const tables = mainContent.querySelectorAll('.trac-query-results');
        const tableTitles = [
            '需要我解决的变更',
            '我曾经提过的变更(还没有解决的)',
            '我需要了解的变更(还没有解决的)',
            '需要我确认是否已解决'
        ];

        tables.forEach((table, index) => {
            const tableCard = document.createElement('div');
            tableCard.className = 'card table-card';

            // 创建卡片头部
            const header = document.createElement('div');
            header.className = 'card-header';
            header.innerHTML = `
                <div class="flex items-center justify-between">
                    <h3 class="text-lg font-semibold text-gray-800">
                        <i class="fas fa-tasks mr-2"></i>${tableTitles[index]}
                    </h3>
                </div>
            `;

            // 创建表格容器
            const tableContainer = document.createElement('div');
            tableContainer.className = 'p-4 overflow-x-auto';

            // 创建新表格
            const newTable = document.createElement('table');
            newTable.className = 'min-w-full divide-y divide-gray-200';

            // 创建表头
            const thead = document.createElement('thead');
            thead.className = 'bg-gray-50';
            thead.innerHTML = `
                <tr>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">描述</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">报告人</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属主</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">组件</th>
                    <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">项目</th>
                </tr>
            `;
            newTable.appendChild(thead);

            // 创建表格主体
            const tbody = document.createElement('tbody');
            tbody.className = 'bg-white divide-y divide-gray-200';

            // 直接处理 tr 元素
            const rows = table.querySelectorAll('tr');
            rows.forEach(row => {
                const newRow = document.createElement('tr');
                newRow.className = 'hover:bg-gray-50 cursor-pointer';

                // 复制每个单元格
                const cells = row.querySelectorAll('td');
                cells.forEach((cell, cellIndex) => {
                    const newCell = document.createElement('td');
                    newCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';

                    // 处理状态列（第二列）
                    if (cellIndex === 1) {
                        const status = cell.textContent.trim().toLowerCase();
                        newCell.innerHTML = `
                            <span class="status-badge ${status}">
                                ${cell.textContent}
                            </span>
                        `;
                    } else {
                        newCell.innerHTML = cell.innerHTML;
                    }

                    newRow.appendChild(newCell);
                });

                // 行点击跳转
                const firstLink = row.querySelector('a');
                if (firstLink) {
                    newRow.addEventListener('click', (e) => {
                        // 避免点击单元格内的链接时重复跳转
                        if (e.target.tagName.toLowerCase() !== 'a') {
                            window.open(firstLink.href, '_blank');
                        }
                    });
                }

                tbody.appendChild(newRow);
            });

            newTable.appendChild(tbody);
            tableContainer.appendChild(newTable);

            // 添加样式
            const style = document.createElement('style');
            style.textContent = `
                .table-card {
                    background: white;
                    border-radius: 1rem;
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                    margin-bottom: 2rem;
                    overflow: hidden;
                    transition: all 0.3s ease;
                }

                .table-card:hover {
                    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
                }

                .table-card .card-header {
                    padding: 1.25rem 1.5rem;
                    border-bottom: 2px solid #e5e7eb;
                    background: linear-gradient(to right, #f8fafc, #f1f5f9);
                }

                .table-card .card-header h3 {
                    color: #1e40af;
                    font-size: 1.25rem;
                    font-weight: 600;
                    display: flex;
                    align-items: center;
                }

                .table-card .card-header h3 i {
                    margin-right: 0.75rem;
                    color: #3b82f6;
                }

                .table-card table {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 0;
                }

                .table-card th {
                    padding: 1rem 1.5rem;
                    text-align: left;
                    font-size: 0.875rem;
                    font-weight: 600;
                    color: #1e40af;
                    background: #f8fafc;
                    border-bottom: 2px solid #e5e7eb;
                    white-space: nowrap;
                }

                .table-card td {
                    padding: 1rem 1.5rem;
                    font-size: 0.875rem;
                    color: #4b5563;
                    border-bottom: 1px solid #e5e7eb;
                    transition: all 0.2s ease;
                }

                .table-card tr {
                    transition: all 0.2s ease;
                }

                .table-card tr:hover {
                    background-color: #f1f5f9;
                    transform: translateY(-1px);
                }

                .table-card tr:hover td {
                    color: #1e40af;
                }

                .table-card a {
                    color: #3b82f6;
                    text-decoration: none;
                    font-weight: 500;
                    transition: all 0.2s ease;
                }

                .table-card a:hover {
                    color: #1e40af;
                    text-decoration: underline;
                }

                /* 状态标签样式优化 */
                .table-card .status-badge {
                    display: inline-flex;
                    align-items: center;
                    padding: 0.25rem 0.75rem;
                    border-radius: 9999px;
                    font-size: 0.75rem;
                    font-weight: 600;
                    text-transform: uppercase;
                    letter-spacing: 0.05em;
                }

                .table-card .status-badge.new {
                    background: #dcfce7;
                    color: #166534;
                }

                .table-card .status-badge.assigned {
                    background: #e0f2fe;
                    color: #0369a1;
                }

                .table-card .status-badge.closed {
                    background: #f3f4f6;
                    color: #4b5563;
                }

                /* 表格容器样式 */
                .table-container {
                    padding: 1.5rem;
                    overflow-x: auto;
                    background: white;
                }

                /* 响应式优化 */
                @media (max-width: 768px) {
                    .table-card .card-header {
                        padding: 1rem;
                    }

                    .table-card th,
                    .table-card td {
                        padding: 0.75rem 1rem;
                    }

                    .table-card .status-badge {
                        padding: 0.2rem 0.5rem;
                        font-size: 0.7rem;
                    }
                }
            `;
            document.head.appendChild(style);

            tableCard.appendChild(header);
            tableCard.appendChild(tableContainer);
            newContainer.appendChild(tableCard);
        });

        // 处理源码浏览表格
        const repoTable = document.querySelector('#repoindex');
        if (repoTable) {
            // 添加新的样式
            const style = document.createElement('style');
            style.textContent = `
                #repoindex {
                    width: 100%;
                    border-collapse: separate;
                    border-spacing: 0;
                    background: white;
                    border-radius: 0.5rem;
                    overflow: hidden;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                }

                #repoindex thead {
                    background: linear-gradient(to right, #f8fafc, #f1f5f9);
                }

                #repoindex th {
                    padding: 1rem;
                    text-align: left;
                    font-weight: 600;
                    color: #1e40af;
                    border-bottom: 2px solid #e5e7eb;
                    white-space: nowrap;
                }

                #repoindex th a {
                    color: #1e40af;
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                #repoindex th a:hover {
                    color: #3b82f6;
                }

                #repoindex td {
                    padding: 0.75rem 1rem;
                    border-bottom: 1px solid #e5e7eb;
                    color: #4b5563;
                }

                #repoindex tr:hover {
                    background-color: #f8fafc;
                }

                #repoindex .name {
                    min-width: 200px;
                    max-width: 300px;
                }

                #repoindex .size {
                    width: 80px;
                }

                #repoindex .rev {
                    width: 100px;
                }

                #repoindex .date {
                    width: 180px;
                }

                #repoindex .author {
                    width: 100px;
                }

                #repoindex .change {
                    min-width: 200px;
                    max-width: 400px;
                }

                #repoindex .expander {
                    display: inline-block;
                    width: 16px;
                    height: 16px;
                    margin-right: 0.5rem;
                    cursor: pointer;
                    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"/></svg>') no-repeat center;
                    background-size: 16px;
                    opacity: 0.5;
                    transition: all 0.2s;
                }

                #repoindex .expander:hover {
                    opacity: 1;
                }

                #repoindex .expander.expanded {
                    transform: rotate(90deg);
                }

                #repoindex .dir {
                    color: #3b82f6;
                    text-decoration: none;
                    font-weight: 500;
                }

                #repoindex .dir:hover {
                    color: #1e40af;
                    text-decoration: underline;
                }

                #repoindex .trac-author {
                    color: #6b7280;
                    font-weight: 500;
                }

                #repoindex .timeline {
                    color: #6b7280;
                    text-decoration: none;
                }

                #repoindex .timeline:hover {
                    color: #3b82f6;
                    text-decoration: underline;
                }

                #repoindex .ticket {
                    display: inline-flex;
                    align-items: center;
                    padding: 0.25rem 0.5rem;
                    border-radius: 0.25rem;
                    font-size: 0.875rem;
                    font-weight: 500;
                    text-decoration: none;
                }

                #repoindex .ticket.closed {
                    background: #f3f4f6;
                    color: #4b5563;
                }

                #repoindex .ticket.assigned {
                    background: #e0f2fe;
                    color: #0369a1;
                }

                #repoindex .ticket:hover {
                    opacity: 0.9;
                }

                /* 响应式处理 */
                @media (max-width: 1024px) {
                    #repoindex {
                        display: block;
                        overflow-x: auto;
                    }

                    #repoindex th,
                    #repoindex td {
                        white-space: nowrap;
                    }
                }
            `;
            document.head.appendChild(style);

            // 包装表格容器
            const tableContainer = document.createElement('div');
            tableContainer.style.cssText = `
                width: 100%;
                overflow-x: auto;
                background: white;
                border-radius: 0.5rem;
                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                margin: 1rem 0;
            `;
            repoTable.parentNode.insertBefore(tableContainer, repoTable);
            tableContainer.appendChild(repoTable);
        }

        // 处理报表列表
        const reportsDiv = document.querySelector('.reports');
        if (reportsDiv) {
            document.querySelector('#altlinks').remove();
            document.querySelector('#ctxtnav').remove();

            // 添加新的样式
            const style = document.createElement('style');
            style.textContent = `
                .reports {
                    background: white;
                    border-radius: 0.5rem;
                    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
                    padding: 1.5rem;
                    margin: 1rem 0;
                }

                .reports h2 {
                    color: #1e40af;
                    font-size: 1.5rem;
                    font-weight: 600;
                    margin-bottom: 1.5rem;
                    padding-bottom: 0.75rem;
                    border-bottom: 2px solid #e5e7eb;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .reports #trac-sort-order {
                    font-size: 0.875rem;
                    color: #6b7280;
                }

                .reports #trac-sort-order a {
                    color: #3b82f6;
                    text-decoration: none;
                    margin-left: 0.5rem;
                    padding: 0.25rem 0.5rem;
                    border-radius: 0.25rem;
                    transition: all 0.2s;
                }

                .reports #trac-sort-order a:hover {
                    background: #f1f5f9;
                }

                .reports #trac-sort-order a.asc {
                    background: #e0f2fe;
                    color: #0369a1;
                }

                .reports .collapsed {
                    background: #f8fafc;
                    border: 1px solid #e5e7eb;
                    border-radius: 0.5rem;
                    margin-bottom: 0.75rem;
                    transition: all 0.3s ease;
                }

                .reports .collapsed:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                }

                .reports .collapsed h3 {
                    margin: 0;
                    padding: 1rem;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                }

                .reports .collapsed h3 a {
                    color: #1e293b;
                    text-decoration: none;
                    font-weight: 500;
                    flex: 1;
                    display: flex;
                    align-items: center;
                    gap: 0.5rem;
                }

                .reports .collapsed h3 a:hover {
                    color: #3b82f6;
                }

                .reports .collapsed h3 a em {
                    color: #6b7280;
                    font-style: normal;
                    font-size: 0.875rem;
                    background: #e5e7eb;
                    padding: 0.25rem 0.5rem;
                    border-radius: 0.25rem;
                }

                .reports .collapsed .foldable {
                    margin-left: 1rem;
                }

                .reports .collapsed .foldable a {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    width: 24px;
                    height: 24px;
                    border-radius: 0.25rem;
                    color: #6b7280;
                    transition: all 0.2s;
                }

                .reports .collapsed .foldable a:hover {
                    background: #e5e7eb;
                    color: #1e40af;
                }

                .reports .collapsed .description {
                    padding: 1rem;
                    background: white;
                    border-top: 1px solid #e5e7eb;
                    border-radius: 0 0 0.5rem 0.5rem;
                    font-size: 0.875rem;
                    color: #4b5563;
                }

                .reports .collapsed .description p {
                    margin: 0.5rem 0;
                }

                .reports .collapsed .description blockquote {
                    margin: 0.5rem 0;
                    padding: 0.75rem;
                    background: #f8fafc;
                    border-left: 4px solid #3b82f6;
                    border-radius: 0.25rem;
                }

                .reports .inlinebuttons {
                    padding: 1rem;

                    border-bottom: 1px solid #e5e7eb;
                }

                .reports .inlinebuttons input[type="submit"] {
                    background: #ef4444;
                    color: white;
                    border: none;
                    height: auto !important;
                    padding: 0.5rem 1rem;
                    border-radius: 0.25rem;
                    cursor: pointer;
                    transition: all 0.2s;
                }

                .reports .inlinebuttons input[type="submit"]:hover {
                    background: #dc2626;
                }

                /* 响应式处理 */
                @media (max-width: 768px) {
                    .reports {
                        padding: 1rem;
                    }

                    .reports h2 {
                        flex-direction: column;
                        gap: 0.5rem;
                        align-items: flex-start;
                    }

                    .reports #trac-sort-order {
                        width: 100%;
                    }

                    .reports .collapsed h3 {
                        flex-direction: column;
                        align-items: flex-start;
                        gap: 0.5rem;
                    }

                    .reports .collapsed .foldable {
                        margin-left: 0;
                    }
                }
            `;
            document.head.appendChild(style);

            // 为每个折叠项添加展开/收起功能
            const collapsedItems = reportsDiv.querySelectorAll('.collapsed');
            collapsedItems.forEach(item => {
                const foldable = item.querySelector('.foldable a');
                const description = item.querySelector('.description');

                if (foldable && description) {
                    foldable.addEventListener('click', (e) => {
                        e.preventDefault();
                        description.style.display = description.style.display === 'none' ? 'block' : 'none';
                        foldable.style.transform = description.style.display === 'none' ? 'rotate(0deg)' : 'rotate(180deg)';
                    });

                    // 默认隐藏描述
                    description.style.display = 'none';
                }
            });
        }

        // 只有在成功创建了新内容时才替换原有内容
        if (newContainer.children.length > 0) {
            mainContent.innerHTML = '';
            mainContent.appendChild(newContainer);
        }
    }

    // 添加创建现代导航栏的函数
    function createModernNav() {
        const banner = document.querySelector('#banner');
        const mainnav = document.querySelector('#mainnav');
        if (!banner || !mainnav) return;

        // 获取原始用户名
        const originalUserInfo = document.querySelector('#metanav .trac-author-user');
        const userName = originalUserInfo ? originalUserInfo.textContent.trim() : '用户';
        const userInitial = userName.charAt(0); // 获取用户名首字

        const modernNav = document.createElement('div');
        modernNav.className = 'modern-nav';
        modernNav.innerHTML = `
            <div class="nav-left">
                <div class="nav-logo">
                    <span class="nav-logo-text">eri-erp</span>
                </div>
                <ul class="nav-menu">
                    <li><a href="/trac/eri-erp/wiki" class="active"><i class="fas fa-book"></i>Wiki</a></li>
                    <li><a href="/trac/eri-erp/timeline"><i class="fas fa-history"></i>时间线</a></li>
                    <li><a href="/trac/eri-erp/roadmap"><i class="fas fa-map"></i>路线图</a></li>
                    <li><a href="/trac/eri-erp/browser"><i class="fas fa-code"></i>源码浏览</a></li>
                    <li><a href="/trac/eri-erp/report"><i class="fas fa-tasks"></i>查看任务单</a></li>
                    <li><a href="/trac/eri-erp/newticket"><i class="fas fa-plus"></i>新建任务单</a></li>
                    <li><a href="/trac/eri-erp/search"><i class="fas fa-search"></i>搜索</a></li>
                </ul>
            </div>
            <div class="nav-right">
                <div class="nav-user">
                    <div class="nav-user-info">
                        <div class="nav-user-avatar">${userInitial}</div>
                        <span>${userName}</span>
                        <i class="fas fa-chevron-down"></i>
                    </div>
                    <div class="nav-user-dropdown">
                        <a href="/trac/eri-erp/prefs"><i class="fas fa-cog"></i>个人设置</a>
                        <a href="/trac/eri-erp/wiki/TracGuide"><i class="fas fa-question-circle"></i>帮助/指南</a>
                        <a href="/trac/eri-erp/about"><i class="fas fa-info-circle"></i>关于Trac</a>
                        <a href="/trac/eri-erp/logout"><i class="fas fa-sign-out-alt"></i>注销</a>
                    </div>
                </div>
            </div>
        `;

        // 替换原有的导航结构
        banner.parentNode.insertBefore(modernNav, banner);
        banner.remove();
        mainnav.remove();

        // 添加用户下拉菜单交互
        const userInfo = modernNav.querySelector('.nav-user-info');
        const userDropdown = modernNav.querySelector('.nav-user-dropdown');

        userInfo.addEventListener('click', () => {
            userDropdown.classList.toggle('active');
        });

        // 点击其他地方关闭下拉菜单
        document.addEventListener('click', (e) => {
            if (!userInfo.contains(e.target)) {
                userDropdown.classList.remove('active');
            }
        });

        // 获取所有菜单项
        const navLinks = modernNav.querySelectorAll('.nav-menu a');

        // 绑定点击事件
        const currentPath = window.location.pathname;
        navLinks.forEach(link => {
            if (link.getAttribute('href') === currentPath) {
                link.classList.add('active');
            } else {
                link.classList.remove('active');
            }
        });
    }

    // 修改initPage函数
    function initPage() {
        // 加载外部资源
        loadExternalResources();

        // 添加自定义样式
        const style = document.createElement('style');
        style.textContent = customStyles;
        document.head.appendChild(style);

        // 重新组织main区域内容
        reorganizeMainContent();

        // 添加页脚
        const footer = createModernFooter();
        document.body.appendChild(footer);

        // 添加加载动画
        const loadingSpinner = document.createElement('div');
        loadingSpinner.className = 'loading-spinner';
        document.body.appendChild(loadingSpinner);

        // 3秒后移除加载动画
        setTimeout(() => {
            loadingSpinner.remove();
        }, 3000);

        // 创建现代导航栏
        createModernNav();
    }

    // 等待页面加载完成后执行
    window.addEventListener('load', initPage);
})();